<template>
    <div>
        <div class="tab">
            <router-link to='/list' class="tab-item router-link-active"><span class="tab-link">list</span></router-link>
            <router-link to='/foo' class="tab-item"><span class="tab-link">foo</span></router-link>
        </div>
        <router-view/>
    </div>
</template>

<script>
    export default {

    }
</script>

<style lang="scss" scoped>
.tab {
    display: flex;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    .tab-item {
      flex: 1;
      text-align: center;
      .tab-link {
        padding-bottom: 5px;
        color: #000;
      }
      &.router-link-active {
        .tab-link {
          color: #cc0000;
        }
      }
    }
}
</style>



